﻿<HTML>
	<HEAD>
		<TITLE>Save Your Pet</TITLE>
		 <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>  		
	</HEAD>
	
<style>
	
.con_estilos {	
	font-size:10px;
}

form {
background: #eee;
border: 1px solid #ddd; 
border-radius: 4px; 
margin-bottom: 1em; 
padding: 1em; 
box-shadow: #ccc 0 0 15px; 
width: 34em; 
}
input { 
height: 1.3em; 
margin: 0; 
border-radius: 4px;
}

/* defining some specific input sizes */

input[type=text],
input[type=tel],
input[type=email],
input[type=url] { width: 14em; }
input[type=number] { width: 3em; }
input[type=color] { width: 4em; }

input[type=submit] { margin: 2 em 0 0 13.5em; height: 2em; }

/* dynamic CSS3 validation styles */

input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range { outline: 2px #0f0 solid; }

input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range { outline: 2px #f00 solid; }



</style>


	
	<LINK REL='STYLESHEET' TYPE='TEXT/CSS' HREF='styles/styles.css'>
	<LINK REL='STYLESHEET' TYPE='TEXT/CSS' HREF='styles/formulario.css'>
	<?php
		include 'funciones.php';
	?>
	
<script>

function validar(){	
				
	var nombreOk= check_nombre_valido("nombre");
	var apellidoOk =check_apellido_valido("apellidos");
	var ciudadOk = check_ciudad_valido("ciudad");
	var direccionOk = check_direccion_valido("direccion");
	var telefonoOk = check_telefono("telefono");
	var emailOk = check_email_valido("email");
	var usuarioOk = check_usuario_valido("usuario");
	
	if(usuarioOk){        
        $("#message").html("<img src='images/ajax-loader.gif' /> Comprobando...");             
 
        var username=$("#usuario").val();
 
         $.ajax({
            type:"post",
            url:"check.php",
            data:"usuario="+username,
            success:function(data){
                        if(data==0){
                            $("#message").html("<img src='images/ok.gif' width='5%' /> Nombre de usuario libre");
                        }
                        else{
                            $("#message").html("<img src='images/mal.gif' width='5%'/> Nombre de usuario ocupado");
                        }
                    }
                 });                 
	}
	
	var passwordsOk = check_passwords_valido("pass1","pass2");	
	
	/**full permite números y/o letras, normal sólo letras**/
	
	if(nombreOk && apellidoOk && ciudadOk && direccionOk && telefonoOk && emailOk && usuarioOk && passwordsOk){
		alert('Todo ok');

	}
	
	
}

$(document).ready(function(){
    $("#usuario").change(function(){
		$("#message").html("<img src='images/ajax-loader.gif' /> comprobando...");   
         
        var username=$("#usuario").val();
 
        $.ajax({
            type:"post",
            url:"check.php",
            data:"usuario="+username,
            success:function(data){
                if(data==0){
                    $("#message").html("<img src='images/ok.gif' width='5%' /> Nombre de usuario libre");
                }else{
                    $("#message").html("<img src='images/mal.gif' width='5%'/> Nombre de usuario ocupado");
                }
            }
        }); 
    }); 
});



</script>
	
<BODY>
<CENTER>
<DIV ID='fondo'>

	<div id="columna_izquierda">
	
	</div>

	<div id="columna_derecha">
	
	</div>
	
	<DIV ID='menu'>
		<?php include 'menu.php'; ?>
	</DIV> <!-- menu -->

	<div id="loader">
		<?php include 'cabecera.php';?>		
			<br><br><br><br><br><br><br>
			<p class="Sangria">El registro en la aplicación te permite obtener un perfil en el que añadir mascotas. Los campos marcados con <FONT COLOR='#CA0000'>*</font> son obligatorios. El resto de campos son opcionales, aunque 
			se recomienda que se introduzcan para facilitar su localización. Estos datos son privados tal y como se describe en nuestra <a href='politica.html'>política de privacidad</a>. Una vez finalizado el registro 
			podrá comenzar a añadir mascotas y a participar en nuestras encuestas.
			<br><br>			
			<form id="registro" name="registro" method="post" action="registrado.php">		
			<table border='0' class="formulario" width="550px">					
					<tr><td width="120px">Nombre <FONT COLOR='#CA0000'>*</font></td>
					<td width="180px"><input type="text" id="nombre" name="nombre" size="15" maxlength="15" placeholder="Nombre real" required onBlur="check_nombre_valido('nombre')"></td>
					<td width="250px">
					<div id='mal_nombre_real'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Sólo letras. Mínimo 2 caracteres.	
					</div>
					<div id='ok_nombre_real'>
						<img src='images/ok.gif' BORDER='0' WIDTH='5%'>						
					</div>
					</td>
					<tr><td>Apellidos <FONT COLOR='#CA0000'>*</font></td><td><input type="text" id="apellidos" name="apellidos" size="20" maxlength="35" placeholder="Apellidos" required onBlur="check_apellido_valido('apellidos')"></td>
					<td>
					<div id='mal_apellido'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Sólo letras. Mínimo 2 caracteres.	
					</div>
					<div id='ok_apellido'>
						<img src='images/ok.gif' BORDER='0' WIDTH='5%'>						
					</div>
					<tr><td>País</td><td>
					<select id="pais" name="pais" class="con_estilos">
                      <option value="AF">Afganistán</option> 
                      <option value="AL">Albania</option> 
                      <option value="DE">Alemania</option> 
                      <option value="AD">Andorra</option> 
                      <option value="AO">Angola</option> 
                      <option value="AI">Anguilla</option> 
                      <option value="AQ">Antártida</option> 
                      <option value="AG">Antigua y Barbuda</option> 
                      <option value="AN">Antillas Holandesas</option> 
                      <option value="SA">Arabia Saudí</option> 
                      <option value="DZ">Argelia</option> 
                      <option value="AR">Argentina</option> 
                      <option value="AM">Armenia</option> 
                      <option value="AW">Aruba</option> 
                      <option value="AU">Australia</option> 
                      <option value="AT">Austria</option>  
                      <option value="AZ">Azerbaiyán</option>  
                      <option value="BS">Bahamas</option>  
                      <option value="BH">Bahrein</option>  
                      <option value="BD">Bangladesh</option>  
                      <option value="BB">Barbados</option>  
                      <option value="BE">Bélgica</option>  
                      <option value="BZ">Belice</option>  
                      <option value="BJ">Benin</option>  
                      <option value="BM">Bermudas</option>  
                      <option value="BY">Bielorrusia</option>  
                      <option value="MM">Birmania</option>  
                      <option value="BO">Bolivia</option>  
                      <option value="BA">Bosnia y Herzegovina</option>  
                      <option value="BW">Botswana</option>  
                      <option value="BR">Brasil</option>  
                      <option value="BN">Brunei</option>  
                      <option value="BG">Bulgaria</option>  
                      <option value="BF">Burkina Faso</option>  
                      <option value="BI">Burundi</option>  
                      <option value="BT">Bután</option>  
                      <option value="CV">Cabo Verde</option>  
                      <option value="KH">Camboya</option>  
                      <option value="CM">Camerún</option>  
                      <option value="CA">Canadá</option>  
                      <option value="TD">Chad</option>  
                      <option value="CL">Chile</option>  
                      <option value="CN">China</option>  
                      <option value="CY">Chipre</option>  
                      <option value="VA">Ciudad del Vaticano (Santa Sede)</option>  
                      <option value="CO">Colombia</option>  
                      <option value="KM">Comores</option>  
                      <option value="CG">Congo</option>  
                      <option value="CD">Congo, República Democrática del</option>  
                      <option value="KR">Corea</option>  
                      <option value="KP">Corea del Norte</option>  
                      <option value="CI">Costa de Marfíl</option>  
                      <option value="CR">Costa Rica</option>  
                      <option value="HR">Croacia (Hrvatska)</option>  
                      <option value="CU">Cuba</option>  
                      <option value="DK">Dinamarca</option>  
                      <option value="DJ">Djibouti</option>  
                      <option value="DM">Dominica</option>  
                      <option value="EC">Ecuador</option>  
                      <option value="EG">Egipto</option>  
                      <option value="SV">El Salvador</option>  
                      <option value="AE">Emiratos Árabes Unidos</option>  
                      <option value="ER">Eritrea</option>  
                      <option value="SI">Eslovenia</option>  
                      <option value="ES" selected>España</option>  
                      <option value="US">Estados Unidos</option>  
                      <option value="EE">Estonia</option>  
                      <option value="ET">Etiopía</option>  
                      <option value="FJ">Fiji</option>  
                      <option value="PH">Filipinas</option>  
                      <option value="FI">Finlandia</option>  
                      <option value="FR">Francia</option>  
                      <option value="GA">Gabón</option>  
                      <option value="GM">Gambia</option>  
                      <option value="GE">Georgia</option>  
                      <option value="GH">Ghana</option>  
                      <option value="GI">Gibraltar</option>  
                      <option value="GD">Granada</option>  
                      <option value="GR">Grecia</option>  
                      <option value="GL">Groenlandia</option>  
                      <option value="GP">Guadalupe</option>  
                      <option value="GU">Guam</option>  
                      <option value="GT">Guatemala</option>  
                      <option value="GY">Guayana</option>  
                      <option value="GF">Guayana Francesa</option>  
                      <option value="GN">Guinea</option>  
                      <option value="GQ">Guinea Ecuatorial</option>  
                      <option value="GW">Guinea-Bissau</option>  
                      <option value="HT">Haití</option>  
                      <option value="HN">Honduras</option>  
                      <option value="HU">Hungría</option>  
                      <option value="IN">India</option>  
                      <option value="ID">Indonesia</option>  
                      <option value="IQ">Irak</option>  
                      <option value="IR">Irán</option>  
                      <option value="IE">Irlanda</option>  
                      <option value="BV">Isla Bouvet</option>  
                      <option value="CX">Isla de Christmas</option>  
                      <option value="IS">Islandia</option>  
                      <option value="KY">Islas Caimán</option>  
                      <option value="CK">Islas Cook</option>  
                      <option value="CC">Islas de Cocos o Keeling</option>  
                      <option value="FO">Islas Faroe</option>  
                      <option value="HM">Islas Heard y McDonald</option>  
                      <option value="FK">Islas Malvinas</option>  
                      <option value="MP">Islas Marianas del Norte</option>  
                      <option value="MH">Islas Marshall</option>  
                      <option value="UM">Islas menores de Estados Unidos</option>  
                      <option value="PW">Islas Palau</option>  
                      <option value="SB">Islas Salomón</option>  
                      <option value="SJ">Islas Svalbard y Jan Mayen</option>  
                      <option value="TK">Islas Tokelau</option>  
                      <option value="TC">Islas Turks y Caicos</option>  
                      <option value="VI">Islas Vírgenes (EE.UU.)</option>  
                      <option value="VG">Islas Vírgenes (Reino Unido)</option>  
                      <option value="WF">Islas Wallis y Futuna</option>  
                      <option value="IL">Israel</option>  
                      <option value="IT">Italia</option>  
                      <option value="JM">Jamaica</option>  
                      <option value="JP">Japón</option>  
                      <option value="JO">Jordania</option>  
                      <option value="KZ">Kazajistán</option>  
                      <option value="KE">Kenia</option>  
                      <option value="KG">Kirguizistán</option>  
                      <option value="KI">Kiribati</option>  
                      <option value="KW">Kuwait</option>  
                      <option value="LA">Laos</option>  
                      <option value="LS">Lesotho</option>  
                      <option value="LV">Letonia</option>  
                      <option value="LB">Líbano</option>  
                      <option value="LR">Liberia</option>  
                      <option value="LY">Libia</option>  
                      <option value="LI">Liechtenstein</option>  
                      <option value="LT">Lituania</option>  
                      <option value="LU">Luxemburgo</option>  
                      <option value="MK">Macedonia, Ex-República Yugoslava de</option>  
                      <option value="MG">Madagascar</option>  
                      <option value="MY">Malasia</option>  
                      <option value="MW">Malawi</option>  
                      <option value="MV">Maldivas</option>  
                      <option value="ML">Malí</option>  
                      <option value="MT">Malta</option>  
                      <option value="MA">Marruecos</option>  
                      <option value="MQ">Martinica</option>  
                      <option value="MU">Mauricio</option>  
                      <option value="MR">Mauritania</option>  
                      <option value="YT">Mayotte</option>  
                      <option value="MX">México</option>  
                      <option value="FM">Micronesia</option>  
                      <option value="MD">Moldavia</option>  
                      <option value="MC">Mónaco</option>  
                      <option value="MN">Mongolia</option>  
                      <option value="MS">Montserrat</option>  
                      <option value="MZ">Mozambique</option>  
                      <option value="NA">Namibia</option>  
                      <option value="NR">Nauru</option>  
                      <option value="NP">Nepal</option>  
                      <option value="NI">Nicaragua</option>  
                      <option value="NE">Níger</option>  
                      <option value="NG">Nigeria</option>  
                      <option value="NU">Niue</option>  
                      <option value="NF">Norfolk</option>  
                      <option value="NO">Noruega</option>  
                      <option value="NC">Nueva Caledonia</option>  
                      <option value="NZ">Nueva Zelanda</option>  
                      <option value="OM">Omán</option>  
                      <option value="NL">Países Bajos</option>  
                      <option value="PA">Panamá</option>  
                      <option value="PG">Papúa Nueva Guinea</option>  
                      <option value="PK">Paquistán</option>  
                      <option value="PY">Paraguay</option>  
                      <option value="PE">Perú</option>  
                      <option value="PN">Pitcairn</option>  
                      <option value="PF">Polinesia Francesa</option>  
                      <option value="PL">Polonia</option>  
                      <option value="PT">Portugal</option>  
                      <option value="PR">Puerto Rico</option>  
                      <option value="QA">Qatar</option>  
                      <option value="UK">Reino Unido</option>  
                      <option value="CF">República Centroafricana</option>  
                      <option value="CZ">República Checa</option>  
                      <option value="ZA">República de Sudáfrica</option>  
                      <option value="DO">República Dominicana</option>  
                      <option value="SK">República Eslovaca</option>  
                      <option value="RE">Reunión</option>  
                      <option value="RW">Ruanda</option>  
                      <option value="RO">Rumania</option>  
                      <option value="RU">Rusia</option>  
                      <option value="EH">Sahara Occidental</option>  
                      <option value="KN">Saint Kitts y Nevis</option>  
                      <option value="WS">Samoa</option>  
                      <option value="AS">Samoa Americana</option>  
                      <option value="SM">San Marino</option>  
                      <option value="VC">San Vicente y Granadinas</option>  
                      <option value="SH">Santa Helena</option>  
                      <option value="LC">Santa Lucía</option>  
                      <option value="ST">Santo Tomé y Príncipe</option>  
                      <option value="SN">Senegal</option>  
                      <option value="SC">Seychelles</option>  
                      <option value="SL">Sierra Leona</option>  
                      <option value="SG">Singapur</option>  
                      <option value="SY">Siria</option>  
                      <option value="SO">Somalia</option>  
                      <option value="LK">Sri Lanka</option>  
                      <option value="PM">St. Pierre y Miquelon</option>  
                      <option value="SZ">Suazilandia</option>  
                      <option value="SD">Sudán</option>  
                      <option value="SE">Suecia</option>  
                      <option value="CH">Suiza</option>  
                      <option value="SR">Surinam</option>  
                      <option value="TH">Tailandia</option>  
                      <option value="TW">Taiwán</option>  
                      <option value="TZ">Tanzania</option>  
                      <option value="TJ">Tayikistán</option>  
                      <option value="TF">Territorios franceses del Sur</option>  
                      <option value="TP">Timor Oriental</option>  
                      <option value="TG">Togo</option>  
                      <option value="TO">Tonga</option>  
                      <option value="TT">Trinidad y Tobago</option>  
                      <option value="TN">Túnez</option>  
                      <option value="TM">Turkmenistán</option>  
                      <option value="TR">Turquía</option>  
                      <option value="TV">Tuvalu</option>  
                      <option value="UA">Ucrania</option>  
                      <option value="UG">Uganda</option>  
                      <option value="UY">Uruguay</option>  
                      <option value="UZ">Uzbekistán</option>  
                      <option value="VU">Vanuatu</option>  
                      <option value="VE">Venezuela</option>  
                      <option value="VN">Vietnam</option>  
                      <option value="YE">Yemen</option>  
                      <option value="YU">Yugoslavia</option>  
                      <option value="ZM">Zambia</option>  
                      <option value="ZW">Zimbabue</option> 
					</select></td>
					<tr><td>Ciudad</td><td><input type="text" id="ciudad" name="ciudad" size="20" maxlength="15" placeholder="Ciudad" onBlur="check_ciudad_valido('ciudad')"></td>
					<td>
					<div id='mal_ciudad'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Sólo letras. Mínimo 2 caracteres.	
					</div>
					<div id='ok_ciudad'>
						<img src='images/ok.gif' BORDER='0' WIDTH='5%'>						
					</div>
					<tr><td>Dirección</td><td><input type="text" id="direccion" name="direccion" size="20" maxlength="60" placeholder="Dirección" onBlur="check_direccion_valido('direccion')"></td>
					<td>
					<div id='mal_direccion'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Sólo letras. Mínimo 8 caracteres.	
					</div>
					<div id='ok_direccion'>
						<img src='images/ok.gif' BORDER='0' WIDTH='5%'>						
					</div>
					<tr><td>Teléfono <FONT COLOR='#CA0000'>*</font></td><td><input type="tel" id="telefono" name="telefono" size="20" maxlength="9" placeholder="123456789" required onBlur="check_telefono('telefono')"></td>
					<td>
					<div id='mal_telefono'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Eso no es un número de teléfono.	
					</div>
					<div id='ok_telefono'>
						<img src='images/ok.gif' BORDER='0' WIDTH='5%'>						
					</div>
					<tr><td>Email <FONT COLOR='#CA0000'>*</font></td><td><input type="email" id="email" name="email" size="20" placeholder="email@dominio.com" maxlength="60" onBlur="check_email_valido('email')"></td>		
					<td>
					<div id='mal_email'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Eso no es un email.	
					</div>
					<div id='ok_email'>
						<img src='images/ok.gif' BORDER='0' WIDTH='5%'>						
					</div>
					<tr><td>Fecha nacimiento <FONT COLOR='#CA0000'>*</font></td><td><input type="date" id="fecha_nacimiento" name="fecha_nacimiento" min="2010-12-16"></td>					
					<tr><td>Usuario<FONT COLOR='#CA0000'>*</font></td><td><input type="text" id="usuario" name="usuario" size="15" maxlength="15" placeholder="Nombre de usuario" required></td>
					<div id="Info"></div>
					<td id="message">
					<div id='mal_usuario'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Sólo letras y números. Mínimo 4.
					</div>
					<div id='ok_usuario'>
						<img src='images/ok.gif' BORDER='0' WIDTH='5%'>						
					</div>	
					</td>
					<tr><td>Contraseña<FONT COLOR='#CA0000'>*</font></td><td><input type="text" id="pass1" name="pass1" size="15" maxlength="15" placeholder="Contraseña" required></td>
					<td>
					<div id='mal_formato_password1'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Sólo letras y números. Mínimo 4.
					</div>
					<div id='mal_coincidencia'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Las dos contraseñas deben coincidir
					</div>		
					<div id='ok_coincidencia'>
						<img src='images/ok.gif' BORDER='0' WIDTH='5%'>						
					</div>						
					<tr><td>Repita contraseña<FONT COLOR='#CA0000'>*</font></td><td><input type="text" id="pass2" name="pass2" size="15" maxlength="15" placeholder="Repita la contraseña" required onBlur="check_passwords_valido('pass1','pass2')"></td>
					<td>
					<div id='mal_formato_password2'>
						<img src='images/mal.gif' BORDER='0' WIDTH='5%'>
						Sólo letras y números. Mínimo 4.
					</div>					
					<tr>
					<td colspan="2"></td>
			</table>
			<!-- <input type="button" class="boton_registro colorNaranja formaBoton" value="Registrar" onClick="validar()"> -->
			<input type="submit" value="Registrar" name="registro" onSubmit="validar();">
			</form>		
		
	</div>			
	<div id='pie'>		
		<?php include 'pie.php';?>		
	</div>
</DIV> <!-- Fondo2--> 



</CENTER>
</BODY>

</HTML>